<template>
  <div>
    <div class="flex-row bg-white">
      <text class="text-muted pt-3 px-1">表号</text>
      <scroller class="scroller border-bottom mb-2"
                :show-scrollbar="false"
                scroll-direction="horizontal">
        <text class="tab-text"
              v-for="(meter, index) in meters"
              :class="[meterIndex===index?'tab-text-active':'']"
              :key="index"
              @click="onMeterSelect(meter, index)">{{meter.ele_table_no}}</text>
      </scroller>
    </div>

    <div class="empty"
         v-if="!meters.length">
      <text class="text-muted">暂无水电信息</text>
    </div>

    <scroller class="bg-white p-2"
              v-else>
      <div class="flex-row ">
        <text class="flex small">户名: {{selectMeter.ele_table_account}}</text>
        <text class="flex small">电话: {{selectMeter.ele_table_phone}}</text>
      </div>
      <text class="border-bottom pb-2 small">地址: {{selectMeter.ele_table_address}}</text>
      <text class="p-1 text-center text-lg mt-3">电量及电费统计图表</text>
      <text class="text-muted small text-center mb-2">(点击可查看具体数值, 0表示无数据)</text>
      <bmchart ref="chart"
               :options="$format(options)"
               style="width:750; height:560;"></bmchart>
      <div class="flex-row border-top">
        <text class="flex icon text-center text-accent p-1"
              @click="goEdit(meterIndex)">&#xe791;</text>
        <text class="flex icon text-center text-accent p-1"
              @click="deleteConfim">&#xe63f;</text>
      </div>
    </scroller>

    <wxc-dialog title="提示"
                :show="dialogVisibe"
                content="确定删除该电表"
                main-btn-color="#42bd56"
                @wxcDialogCancelBtnClicked="onDialogCancel"
                @wxcDialogConfirmBtnClicked="onDialogConfirm"></wxc-dialog>

  </div>
</template>
<script>
import { WxcDialog } from 'weex-ui'
import {
  STORAGE_FARM,
  STORAGE_CREDIT_RELATED
} from '../../plugins/constant'

export default {
  components: {
    WxcDialog
  },
  props: {},
  data() {
    return {
      farm: {},
      related: {},
      meters: [],
      meterIndex: 0,
      options: {},
      dialogVisibe: false
    }
  },
  computed: {
    selectMeter() {
      return this.meterIndex < this.meters.length ? this.meters[this.meterIndex] : {}
    }
  },
  watch: {},
  eros: {
    beforeBackAppear(params) {
      if (params && params.type === 1) { this.getMeter() }
    }
  },
  created() {
    this.getFarmInfo()
  },
  methods: {
    getFarmInfo() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      this.related = this.$storage.getSync(STORAGE_CREDIT_RELATED) || {}
      this.getMeter()

      this.$navigator.setRightItem({
        text: '添加'
      }, () => {
        this.goEdit(-1)
      })
    },
    getMeter() {
      this.$notice.loading.show()
      this.$api.getData({
        server: 'credit',
        table: 'datum_customer_ele_table',
        params: {
          'customer_id.eq': this.farm.id
          // 'customer_related_id.eq': '37e232ce-f019-4ab7-8aab-c92e71d6b91c'
        },
        order: {
          'create_time': 'asc'
        },
        errorMsg: '获取电表数据失败'
      }).then(res => {
        this.meterIndex = 0
        this.meters = (res || []).map(item => {
          item.isFetch = false
          item.xData = []
          item.aData = []
          item.bData = []
          return item
        })
        if (this.meters.length) {
          this.getEle()
        }
      }).finally(() => {
        this.$notice.loading.hide()
      })
    },
    getEle() {
      this.selectMeter = this.meters[this.meterIndex] || {}
      if (this.selectMeter.isFetch) {
        return this.setOption()
      }
      this.$notice.loading.show()
      this.$api.getData({
        server: 'credit',
        table: 'datum_customer_ele_fee',
        params: {
          'credit_ele_table_id.eq': this.selectMeter.credit_ele_table_id
        },
        order: {
          'ele_date': 'asc'
        },
        errorMsg: '获取用电数据失败'
      }).then(res => {
        const data = res || []
        this.selectMeter.xData = []
        this.selectMeter.aData = []
        this.selectMeter.bData = []
        for (let t of data) {
          this.selectMeter.xData.push(t.ele_date)
          const fee = Number.parseFloat(t.ele_fee)
          const nowFee = isNaN(fee) ? 0 : fee
          this.selectMeter.aData.push(nowFee)
          const compare = Number.parseFloat(t.fee_compare.replace(/(.*)%$/, '$1'))
          const lastFee = isNaN(compare) ? '0' : Math.round(nowFee / (1 + compare / 100)) * 100 / 100
          this.selectMeter.bData.push(lastFee)
        }
        this.selectMeter.isFetch = true
        this.setOption()
      }).finally(() => {
        this.$notice.loading.hide()
      })
    },
    setOption() {
      const meter = this.meters[this.meterIndex] || {}
      this.options = {
        backgroundColor: '#ffffff',
        title: {
          show: false,
          text: '电费明细',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: 0,
          data: ['今年', '上年同期']
        },
        xAxis: [{
          type: 'category',
          data: meter.xData
        }],
        yAxis: [{
          type: 'value',
          name: '电费使用'
        }],
        series: [{
          name: '今年',
          type: 'line',
          data: meter.aData
        }, {
          name: '上年同期',
          type: 'line',
          data: meter.bData
        }]
      }
    },
    onMeterSelect(meter, index) {
      this.meterIndex = index
      this.getEle()
    },
    goEdit(index) {
      const route = { name: 'serve.power.edit' }
      if (index > -1 && index < this.meters.length - 1) {
        route.params = this.meters[index]
      } else {
        route.params = {
          customer_id: this.farm.id,
          customer_related_id: this.related.customer_related_id || ''
        }
      }
      this.$nav.open(route)
    },
    deleteConfim() {
      this.dialogVisibe = true
    },
    onDialogCancel() {
      this.dialogVisibe = false
    },
    onDialogConfirm() {
      this.dialogVisibe = false
      this.$api.deleteData({
        server: 'credit',
        table: 'datum_customer_ele_table',
        id: this.meters[this.meterIndex].credit_ele_table_id,
        errorMsg: '删除失败'
      }).then(res => {
        this.$notice.toast({ messge: '删除成功' })
        this.getMeter()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.text-muted {
  color: #999;
}
.text-accent {
  color: $accent-light;
}
.bg-white {
  background-color: #fff;
}
.small {
  font-size: 26px;
}
.mb-1 {
  margin-bottom: 10px;
}
.mb-2 {
  margin-bottom: 20px;
}
.mb-3 {
  margin-bottom: 30px;
}
.mt-3 {
  margin-top: 30px;
}
.p-3 {
  padding: 30px;
}
.p-2 {
  padding: 20px;
}
.p-1 {
  padding: 10px;
}
.pb-2 {
  padding-bottom: 20px;
}
.px-1 {
  padding-left: 10px;
  padding-right: 10px;
}
.pt-3 {
  padding-top: 30px;
}

.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.text-center {
  text-align: center;
}
.text-lg {
  font-size: 34px;
}
.align-center {
  align-items: center;
}
.border-bottom {
  border-bottom-color: $border-color;
  border-bottom-width: 1px;
}
.border-top {
  border-top-color: $border-color;
  border-top-width: 1px;
}
.scroller {
  padding: 15px;
  background-color: #fff;
  flex-direction: row;
  height: 100px;
}
.tab-text {
  padding-left: 60px;
  padding-right: 60px;
  margin-right: 30px;
  height: 70px;
  line-height: 70px;
  align-items: center;
  border-radius: 35px;
  border-style: solid;
  border-width: 1px;
  border-color: $accent;
}
.tab-text-active {
  color: #fff;
  background-color: $accent-light;
}
.empty {
  width: 750px;
  height: 500px;
  align-items: center;
  justify-content: center;
}
</style>
